<template>
    <div class="box_card">
        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <h1>就诊人管理</h1>
                    <el-button type="primary" @click="add" icon="User">添加就诊人</el-button>
                </div>
            </template>
            <!-- 展示就诊人 -->
            <div class="cardBody" v-if="change == 0">
                <el-card style="min-width: 30%;margin-top: 30px;" v-for="(item, index) in saveInfo" :index="index"
                    :peo="peo">
                    <template #header>
                        <div class="card-header">
                            <!-- 左侧 -->
                            <div class="boxLeft">
                                <div class="boxCon">{{ item.isInsure == 1 ? "医保" : "自费" }}</div>
                                <div class="boxName">{{ item.name }}</div>
                            </div>
                            <!-- 右侧 -->
                            <div class="boxRight">
                                <el-button type="primary" @click="changeCard(item)" circle icon="Edit"></el-button>
                                <el-popconfirm @confirm="deletePeo(item)" :title="`你确定要删除${item.name}吗`" width="200px">
                                    <template #reference>
                                        <el-button type="danger" circle
                                            icon="Delete"></el-button>
                                    </template>
                                </el-popconfirm>

                            </div>
                        </div>
                    </template>
                    <div class="bottom">
                        <p>证件类型:{{ item.param.certificatesTypeString }}</p>
                        <p>证件号码:{{ item.certificatesNo }}</p>
                        <p>用户性别:{{ item.sex == 0 ? "女生" : "男士" }}</p>
                        <p>出生日期：{{ item.birthdate }}</p>
                        <p>手机号码：{{ item.phone }}</p>
                        <p>婚姻状况:{{ item.isMarry == 0 ? "未婚" : "已婚" }}</p>
                        <p>当前住址{{ item.param.cityString }}</p>
                        <p>详细地址：{{ item.param.fullAddress }}</p>
                    </div>

                </el-card>
            </div>
            <!-- 增改 -->
            <addUpdate :id="id" :item='saveOne' v-else></addUpdate>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import type { UserResponseData, UserArr,User } from '@/api/hosDetail/type'
import addUpdate from '@/components/member/visitor/addUpdate/index.vue'
import { getPeopleInfo } from '@/api/hosDetail/index'
import { useRoute, useRouter } from "vue-router"
import { deletePeoUser } from '@/api/client/index'
import { ElMessage } from 'element-plus'

let $route = useRoute()
let $router = useRouter()

// 存储就诊人信息
let saveInfo = ref<UserArr>()
// 
let saveOne = ref<User>()
// 存储被选择的人
let peo = ref<number>(-1)
// 更改卡片
let change = ref<number>(0)
// 存储id
let id = ref<string>('')

// 获取就诊人信息
const getInfo = async () => {
    let result: UserResponseData = await getPeopleInfo();
    saveInfo.value = result.data
}
const changeCard = (item:any) => {
    change.value = 1
    id.value = item.id
    saveOne.value= item
    
}
// 新增就诊人
const add = () => {
    change.value = 1
}
// 是删除就诊人
const deletePeo = async (item: any) => {
    try {
        await deletePeoUser(item.id)
        ElMessage({
            type: "success",
            message:"删除成功"
        })
        getInfo()
    } catch(error) { 
        ElMessage({
            type: "error",
            message:"删除失败"
        })
    }

}

onMounted(async () => {
    await getInfo()
})
</script>

<style lang="scss" scoped>
.box_card {
    margin-left: 20px;
    margin-top: 20px;
    width: 100%;

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cardBody {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        :deep(.el-card__header) {
            background-color: #7f7f7f;
        }

        :deep(.el-card__body) {
            display: flex;
        }

        .card-header {
            display: flex;

            .boxLeft {
                display: flex;

                .boxCon {
                    min-width: 20px;
                    min-height: 5px;
                    background-color: white;
                    font-size: 13px;
                    margin-bottom: 5px;
                }

                .boxName {
                    margin-left: 5px;
                }
            }
        }

        h1 {
            margin-top: 10px;
        }

        .bottom {
            position: relative;

            p {
                margin-top: 10px;
            }
        }


    }
}
</style>